<script setup lang="ts">
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { queryUsers } from '@/api/system/role';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  const page = usePageTable({
    searchForm: {
      state: {
        staffName: '',
        staffId: '',
        staffStatus: '',
        createTime: [],
      },
    },
    table: {
      apiFun: queryUsers,
      columns: [
        {
          title: '账号',
          dataIndex: 'accountNo',
          width: 200,
          align: 'center',
        },
        {
          title: '归属人',
          dataIndex: 'staffName',
          width: 200,
          align: 'center',
        },
        {
          title: '状态',
          dataIndex: 'statusLabel',
          align: 'center',
        },
        {
          title: '关联手机号',
          dataIndex: 'staffPhone',
          width: 200,
        },
        {
          title: '操作',
          dataIndex: 'action',
          slotName: 'action',
          align: 'center' as const,
        },
      ],
    },
  });

  const showDetail = (record: any) => {
    router.push({
      name: 'UserDetail',
      query: {
        id: record.userid,
      },
    });
  };
</script>

<template>
  <div class="col">
    <TableLayout v-bind="page.bindProps" :create="false">
      <template #searchForm="{ state }">
        <a-form-item field="staffId" label="账号" label-col-flex="60px">
          <a-input
            v-model="state.staffId"
            placeholder="请输入账号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="staffName" label="姓名" label-col-flex="60px">
          <a-input
            v-model="state.staffName"
            placeholder="请输入姓名"
            allow-clear
          />
        </a-form-item>
      </template>

      <template #action="{ record }">
        <a-space>
          <ae-button purpose="view" @click="showDetail(record)">
            查看
          </ae-button>
        </a-space>
      </template>
    </TableLayout>
  </div>
</template>

<style lang="less" scoped></style>
